<template>
  <div>
    <van-nav-bar title="不凡乐购" left-text="返回" left-arrow @click-left="onClickLeft" />
    <form action="/">
      <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
      />
    </form>
    <div class="map_container">
      <div class="title">显示当前位置</div>
      <div id="allmap"></div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      value: "",
      search: "",
      list: "",
      map: ""
    };
  },
  computed: {
    ...mapState(["cityInfo"])
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onSearch() {},
    onCancel() {}
  },
  mounted() {
    //因为要获取真实的DOM结构，所以要将实例放在mounted里面
    // var _this = this;
    // var map = new BMap.Map("allmap"); // 创建Map实例
    // this.map = map;
    // map.centerAndZoom(
    //   new BMap.Point(this.cityInfo.longitude, this.cityInfo.latitude),
    //   11
    // ); // 初始化地图,设置中心点坐标和地图级别
    // // 添加标注
    // var mk = new BMap.Marker(this.cityInfo.point);
    // map.addOverlay(mk);
    // map.panTo(this.cityInfo.point);
    // var options = {
    //   onSearchComplete: function(results) {
    //     // 判断状态是否正确
    //     if (local.getStatus() == BMAP_STATUS_SUCCESS) {
    //       _this.list = results.Hr;
    //       console.log(results);
    //     }
    //   }
    // };
    // var local = new BMap.LocalSearch(map, options);
    // local.search(this.search);
  }
};
</script>

<style lang="scss" scoped>
.box {
  margin-top: 1.226667rem;
}
.map_container {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  .title {
    font-size: 0.45333rem;
    font-weight: 700;
    padding: 0.26667rem;
  }
  #allmap {
    height: 5.33333rem;
    overflow: hidden;
    position: relative;
    z-index: 0;
    background-color: rgb(243, 241, 236);
    color: rgb(0, 0, 0);
    text-align: left;
  }
}
</style>